:root {
  // 默认主题变量
  --sidebar-bg-color: #304156;
  --menu-text-color: #bfcbd9;
  --menu-active-text-color: #409EFF;
  --menu-active-bg-color: rgba(64, 158, 255, 0.1);
  --menu-hover-bg-color: rgba(255, 255, 255, 0.05);
  --menu-sub-bg-color: rgba(0, 0, 0, 0.2);
  --navbar-bg-color: #ffffff;
  --main-bg-color: #f0f2f5;
  --app-content-bg: #ffffff;
}

// 深色主题
html.dark {
  // Element Plus 变量
  --el-bg-color: #1f1f1f;
  --el-bg-color-overlay: #1f1f1f;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #e5eaf3;
  --el-text-color-secondary: #a3a6ad;
  --el-border-color: #363637;
  --el-border-color-light: #363637;
  --el-fill-color-blank: #2b2b2b;
  --el-fill-color: #303030;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  
  // 自定义变量
  --sidebar-bg-color: #1a1a1a !important;
  --menu-text-color: #a3a6ad !important;
  --menu-active-text-color: #409EFF !important;
  --menu-hover-bg-color: rgba(255, 255, 255, 0.05) !important;
  --menu-sub-bg-color: rgba(0, 0, 0, 0.2) !important;
  --navbar-bg-color: #1f1f1f !important;
  --main-bg-color: #141414 !important;
  --app-content-bg: #1f1f1f !important;

  // Element Plus 卡片样式覆盖
  .el-card {
    --el-card-bg-color: var(--app-content-bg);
    border-color: var(--el-border-color);
    color: var(--el-text-color-primary);
  }

  // 表格样式覆盖
  .el-table {
    --el-table-bg-color: var(--app-content-bg);
    --el-table-tr-bg-color: var(--app-content-bg);
    --el-table-header-bg-color: #2b2b2b;
    --el-table-border-color: var(--el-border-color);
    color: var(--el-text-color-regular);

    th.el-table__cell {
      background-color: #2b2b2b;
    }
  }

  // 弹窗样式覆盖
  .el-dialog {
    --el-dialog-bg-color: var(--app-content-bg);
    --el-dialog-border-color: var(--el-border-color);
  }

  // 下拉菜单样式覆盖
  .el-dropdown-menu {
    --el-bg-color-overlay: var(--app-content-bg);
  }

  // 菜单样式覆盖
  .el-menu {
    --el-menu-bg-color: var(--sidebar-bg-color) !important;
    --el-menu-text-color: var(--menu-text-color) !important;
    --el-menu-hover-bg-color: var(--menu-hover-bg-color) !important;
    --el-menu-active-text-color: var(--menu-active-text-color) !important;
    background-color: var(--sidebar-bg-color) !important;

    .el-menu-item,
    .el-sub-menu__title {
      background-color: transparent !important;
      color: var(--menu-text-color) !important;

      &:hover {
        background-color: var(--menu-hover-bg-color) !important;
      }

      &.is-active {
        background-color: var(--menu-active-bg-color) !important;
        color: var(--menu-active-text-color) !important;
      }
    }

    .el-sub-menu .el-menu {
      background-color: var(--menu-sub-bg-color) !important;
    }
  }
}

// 主题过渡
* {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
} 